/**
 * 共享卡钱包
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>共享卡钱包</el-breadcrumb-item>
    </el-breadcrumb> 
   
    <div class="boxBlock">  
      <!-- tab --> 
      <div  class="tabBox" >
        <span  v-for="(item,index) in tabList" :key="index" :class="activeName==index?'cur':''" @click="changeTab(index,item)" >{{ item.name }}共享卡钱包</span>  
      </div>

      <!-- 中心钱包余额，累计冻结金额，本次冻结金额，备注 -->
      <!-- balance  freezeBalance -->
      <div style="padding:20px 0 0 0">   
        <!-- v-if="(userInfo&&userInfo.matrixAccount) || (info&&info.userMatrixBalances>0)" -->
        <el-row :gutter="20" >
          <el-col :span="24">  
            <el-col :span="4">
              <el-card class="card_wallet">
                <el-col :span="16">
                  <div>
                    <span class="font12">{{  activeName==0?'共享卡':'星汇卡' }}钱包总额</span>
                    <div class="font18 text-black font-w6 margin-t10" v-if="activeName==0">
                      {{ (userInfo.userType == '01' || userInfo.userType=='02')?userInfo.matrixBalance:info.userMatrixBalances  }} 
                    </div>
                    <div class="font18 text-black font-w6 margin-t10" v-if="activeName==1">
                      {{ (userInfo.userType == '01' || userInfo.userType=='02')?userInfo.budgetBalance:info.userBudgetBalances  || 0  }} 
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <img src="~@/assets/img/icon_card2.png" />
                </el-col>
              </el-card>
            </el-col> 
            <el-col :span="4" v-if="activeName==1">
              <el-card class="card_wallet">
                <el-col :span="16">
                  <div>
                    <span class="font12">{{  activeName==0?'共享卡':'星汇卡' }}待清算总额</span> 
                    <div class="font18 text-black font-w6 margin-t10"  >
                      {{ (userInfo.userType == '01' || userInfo.userType=='02')?WfDataInfo.waitingClearanceAmount:info.waitingClearanceAmount  || 0  }} 
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <img src="~@/assets/img/icon_card2.png" />
                </el-col>
              </el-card>
            </el-col> 
            
          </el-col> 
        </el-row>
      </div>  

      <div class="serachTop">  
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item v-if="userInfo &&(userInfo.userType == '00' || userInfo.userType=='03')" >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="输入用户ID"
                type="number"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item  >
              <el-select v-model="formInline.transferType" clearable placeholder="请选择" size="small">
                <el-option 
                  label="转出"
                  value="transfer_out">
                </el-option>
                <el-option 
                  label="转入"
                  value="transfer_in">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>

          <el-button size="small" type="primary"
              icon="el-icon-coin"
              v-if="userInfo &&(userInfo.userType == '01' || userInfo.userType=='02')"
              @click="checkUser('1')"  
            >
            转入 
            </el-button>
            <el-button
            size="small" type="primary"
            icon="el-icon-coin"
              @click="checkUser('2')" 
              v-if="userInfo &&(userInfo.userType == '01' || userInfo.userType=='02')"
            >
               转出 
            </el-button>  

          <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()">
            导出
          </el-button>
         

      </div>
    
  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%"
        v-if="listData"
      > 
      <!-- <el-table-column align="center" type="selection" width="60"></el-table-column> -->
      <el-table-column
          prop="userId"
          label="用户ID"
          show-overflow-tooltip
          width="80"
          v-if="userInfo &&(userInfo.userType == '00' || userInfo.userType=='03')" 
        >
        </el-table-column>
        <!-- 
        <el-table-column
          prop="parentUserldinteger"
          label="主账号ID"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>
        
        <el-table-column prop="matrixAccount" label="Matrix账户" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="currency" label="转账币种" show-overflow-tooltip> 
        </el-table-column>  -->
        
        <el-table-column prop="transferAmount" label="转账金额" show-overflow-tooltip>
          <!-- <template slot-scope="scope">
            {{ b(scope.row.amount) }}
          </template> -->
        </el-table-column> 
        <el-table-column prop="transferType" label="转账类型" show-overflow-tooltip> 
            <template slot-scope="scope">
              {{ scope.row.transferType=='transfer_in'?'转入':"转出" }}
            </template> 
        </el-table-column>

        

        <el-table-column prop="createBy" label="创建者" show-overflow-tooltip> 
        </el-table-column> 
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createTime) }}
          </template>
        </el-table-column>


        <!-- <el-table-column prop="updateBy" label="更新者" show-overflow-tooltip> 
        </el-table-column> 
        <el-table-column
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.updateTime) }}
          </template>
        </el-table-column>

    
        <el-table-column
          prop="createdAtStart"
          label="开始时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAtStart) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAtEnd"
          label="截止时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAtEnd) }}
          </template>
        </el-table-column> -->

        <el-table-column prop="remark" label="备注" show-overflow-tooltip>  
        </el-table-column>
        <!-- <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
           
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 界面 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="editFormVisible"
      width="50%"
      @close="closeDialog" 
      v-if="editFormVisible"
    >
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="180px"> 
        <el-form-item label="中心钱包余额：">
           {{ userInfo.balance }}
        </el-form-item> 
        <el-form-item label="共享卡钱包余额：" >
           {{ userInfo.matrixBalance }}
        </el-form-item>
        
        <el-form-item label="转账金额" prop="transferAmount">
          <el-input
            size="small"
            v-model="editForm.transferAmount"
            auto-complete="off"
            placeholder="请输入金额"
            :max="title=='转出'? userInfo.matrixBalance:999999"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            size="small"
            v-model="editForm.remark"
            auto-complete="off"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          
          @click="editFormVisible=false"
        >
          取消
        </el-button>
        <el-button
        type="primary" 
          :disabled="disabled"
          @click="submitForm" 
        >
          确定
        </el-button>
      </div>
    </el-dialog>

     <!-- 转出转入 万里汇界面 -->
     <el-dialog
          :title="titleWlh"
          :close-on-click-modal="false"
          :visible.sync="wlhFormVisible"
          min-width="50%"
          @close="closeDialog('wlheditForm')" 
          v-if="wlhFormVisible"
        >
          <el-form :model="zwlhForm" :rules="wlhrulesEdit" ref="wlheditForm" label-min-width="140px">  
        
            <el-form-item label="星汇卡钱包余额：" >
              {{  userInfo.budgetBalance }}
            </el-form-item>
            
            <el-form-item label="转账金额" prop="transferAmount">
              <el-input
                size="small"
                v-model="zwlhForm.transferAmount"
                auto-complete="off"
                placeholder="请输入金额"
                :max="titleZhuan=='转出'? zwlhForm.matrixBalance:999999"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                size="small"
                v-model="zwlhForm.remark"
                auto-complete="off"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button 
              @click="wlhFormVisible=false"
            >
              取消
            </el-button>
            <el-button
            type="primary" 
              :disabled="disabled"
              @click="submitFormWlh"  
            >
              确定
            </el-button>
          </div>
    </el-dialog>

    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl, 
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      editFormVisible: false,
      title: "转入",

      zhuanForm:{},
      titleZhuan:'转出', 
      titleWlh:'转出',
      wlhFormVisible:false,
      zwlhForm:{},
      wlhrulesEdit:{
         transferAmount:[
            { required: true, message: "请输入金额", trigger: "blur" },
          ], 
      },

      b: format,
      timestampToTime: timestampToTime,
      baseURL: baseURL,
      disabled: false, 
      editForm: {},
      rules: {
        transferAmount: [
          { required: true, message: "充值金额", trigger: "blur" },
          {
            pattern: /^[0-9]+(\.\d{1,2})?$/,
            message: "请输入正整数或者2位数小数",
            trigger: "blur",
          },
          // {
          //   max: userInfo.matrixBalance,
          //   message: "充值金额不能大于"+userInfo.matrixBalance,
          // }
        ],
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        userId: "",
      },
      listData: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:'', 
      info:null, 
      tabList:[ 
        {
          name:'Gwhale卡',
          value:1, 
        },
      
        // {
        //   name:'星际',
        //   value:2,          
        // }, 
        // 0Gwhale卡,1=星汇,2=星际
      ],
      activeName:'0',
      WfDataInfo:{}
    };
  },
  components: {
    Pagination,
    codeChoose
  },
  created() { 
    this.getInfo();
    this.getWfDataInfo();
   
  },
  methods: {  
    editZhuanWLH(){
      let apiUrl  = '/api/wf/transferOutBudget'
      if(this.titleWlh=="转入"){
        apiUrl = '/api/wf/transferInBudget'
      } 
       
      this.disabled = true;
      let params = { 
        transferAmount:this.zwlhForm.transferAmount,
        userId:this.userInfo.userId, 
        remark:this.zwlhForm.remark,
      };
       let  url = getUrl(params); 
        reqJson('post',apiUrl + url, {
        //  ...params
        },{
          headers:{
            ...this.headers
          }
        }) 
        .then((res) => {
          this.disabled = false;
          if (res.code == 0) {
            this.$message.success("操作成功");
            this.getdata(this.formInline);
            this.getInfo()
            this.closeDialog('wlheditForm');
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    editSaveAuthWLH(){  
     // 资金扣除(转出) 
      // 资金扣除(转入)    
        if(this.titleWlh=="转入"){ 
          if(this.verArry.includes('/api/wf/transferInBudget')){ 
            this.wlhFormVisible = false;
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editZhuanWLH()
          }
        }else{
          if(this.verArry.includes('/api/wf/transferOutBudget')){ 
            this.wlhFormVisible = false;
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editZhuanWLH()
          }
        }    
      
    },

    submitFormWlh(type){ 
      this.$refs.wlheditForm.validate((valid) => {
        if (!valid) return;
        this.disabled = true;
        let apiUrl  = '/api/wf/transferInBudget'
        if(this.titleWlh=="转出"){
            apiUrl = '/api/wf/transferOutBudget' 
        }else{

        }  
        this.fn = type;
        this.verType = this.titleWlh=="转入"?'zhuanChuWlh':"zhuanRuWlh"   
        if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes(apiUrl)){ 
            this.$refs.codeRef.openDialog(); 
          }else{ 
            this.editSaveAuthWLH();
          }
        }else{
          this.editSaveAuthWLH();
        }
        this.editFormVisible = false          
      });  
     
    },
    changeBudgetAccount(state){
      this.titleWlh = state==1?'转入':'转出';
      this.zwlhForm = { 
      }; 
      this.wlhFormVisible = true;
    },

    changeTab(index,item) { 
      this.pageparm.currentPage = 1;
      this.pageparm.pageSize = 10;
      this.activeName = index; 
      this.getdata(this.formInline)
    },
 
    getWfDataInfo() {
      service
        .get("/api/photon/getWfDataInfo", {})
        .then((res) => {
          if (res.code == 0) {
            this.WfDataInfo = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },


    getInfo2() {
      service
        .get("/api/admin/getData", {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
            this.getdata(this.formInline);
            if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          }  
            if(this.userInfo &&(this.userInfo.userType == '00' || this.userInfo.userType=='03')){
              this.getInfo2(); 
              this.tabList = [
                {
                  name:'Gwhale卡',
                  value:1, 
                },
                  {
                    name:'星汇',
                    value:1,    
                    
                  },
                ]
            } 
            if(this.userInfo &&(this.userInfo.userType == '01' || this.userInfo.userType=='02'&&this.userInfo.budgetAccountId)){
              this.tabList = [
                {
                  name:'Gwhale卡',
                  value:1, 
                },
                  {
                    name:'星汇',
                    value:1,    
                    
                  },
                ]
            }           



          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },    
    exportEx() {
      let url = getUrl(this.formInline); 
      let apiUrl = '/api/admin/exportMatrixTransferRecordList' 
      if(this.userInfo&&(this.userInfo.userType == '01' || this.userInfo.userType=='02')){
        apiUrl = '/api/photon/exportMatrixTransferRecordList' 
      }   
      service
        .post(apiUrl+ url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getdata(parameter) {
      let url = getUrl(parameter);   
      let apiUrl = '/api/admin/getMatrixTransferRecordList' 
      if(this.activeName==1){
         apiUrl = '/api/admin/getBudgetTransferRecordList' 
      }  
      if(this.userInfo&&(this.userInfo.userType == '01' || this.userInfo.userType=='02')){
        apiUrl = '/api/photon/getMatrixTransferRecordList' 
        if(this.activeName==1){
          apiUrl = '/api/wf/getBudgetTransferRecordList' 
        }
      }  
      service
        .get(apiUrl+ url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows; 
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    callFather(parm) { 
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    checkUser(type) {
      if(this.activeName==1){
        this.changeBudgetAccount(type)
      }else{
        this.editFormVisible = true;
        if(type==1){
          this.title = "转入";
        } else if(type==2){
          this.title = "转出";
        }
        this.editForm = {}
      }
  
      
    },
    getParam(val,type){   
      this.headers = val;
      if(this.activeName==1){
        this.editZhuanWLH();
      }else{
        this.editZhuan() 
      } 
      // 'zhuanChuWlh':"zhuanRuWlh"    
    },  
    editZhuan(){
      let apiUrl  = '/api/photon/transferOutMatrix'
      if(this.title=="转入"){
        apiUrl = '/api/photon/transferInMatrix'
      } 
      this.disabled = true;
       let  url = getUrl(this.editForm); 
        reqJson('post',apiUrl + url, {
          // ...this.editForm
        },{
          headers:{
            ...this.headers
          }
        }) 
        .then((res) => {
          this.disabled = false;
          if (res.code == 0) {
            this.$message.success("操作成功");
            this.getdata(this.formInline);
            this.getInfo()
            this.closeDialog();
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    editSaveAuth(){  
     // 资金扣除(转出) 
      // 资金扣除(转入)    
        if(this.title=="转入"){ 
          if(this.verArry.includes('/api/photon/transferInMatrix')){ 
            this.zhuanFormVisible = false;
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editZhuan()
          }
        }else{
          if(this.verArry.includes('/api/photon/transferOutMatrix')){ 
            this.zhuanFormVisible = false;
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editZhuan()
          }
        }    
      
    },
    submitForm(type) { 
      this.$refs.editForm.validate((valid) => {
        if (!valid) return;
        let apiUrl  = '/api/photon/transferOutMatrix'
        if(this.title=="转入"){
          apiUrl = '/api/photon/transferInMatrix'
        }  
        this.fn = type;
        this.verType = this.title=="转入"?'zhuanChu':"zhuanRu"   
        if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes(apiUrl)){
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuth();
          }
        }else{
          this.editSaveAuth();
        }
        this.editFormVisible = false
        // this.editSaveAuth();
         
      });
    },
    // 关闭编辑、增加弹出框
    closeDialog(name) {
      if(name == "wlheditForm"){
        this.wlhFormVisible = false; 
        this.$refs.wlheditForm.resetFields(); 
      } else{
        this.editFormVisible = false;
      }
      
    },
  },
};
</script>

<style scoped>

.card_wallet {
  padding: 10px 0 20px;
  height: 80px;
  background-size: 100% 100%;
  border-radius: 20px;
  color: #a0aec0;
}

.user-search {
  margin-top: 20px;
}
.el-upload .avatar {
  margin-left: -15px;
  margin-top: -15px;
  width: 180px;
  height: 180px;
  display: block;
}
.el-image {
  width: 180px;
  height: 180px;
}


.tabBox{
  border-bottom: 1px solid #ddd; 
  background: #fff; 
}
.tabBox span{
  padding: 10px;
  margin: 0 20px;
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
}
.tabBox span.cur{ 
  /* background: #e3b85a; */
  color: #e3b85a;
  font-weight: bold;
  border-bottom: 4px solid #e3b85a;
  /* border-radius: 4px; */

}
</style>

 
 